<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>


		<form action="">
			用户名:<input type="text" name="username" id="username" /><br />
			密码:<input type="password" name="password" id="password" onfocus="txtFocus()" onblur="txtBlur()" /><br />
			真实名字:<input type="text" name="password" id="realname" onfocus="txtFocus()" onblur="txtBlur()" /><br />
			邮箱:<input type="text" name="password" id="email" onfocus="txtFocus()" onblur="txtBlur()" /><br />
			电话:<input type="text" name="password" id="tel" onfocus="txtFocus()" onblur="txtBlur()" /><br />
			
			<select onchange="changeColor()" id="colorSel">
				<option value="red">红色</option>
				<option value="green">绿色</option>
				<option value="blue">蓝色</option>
			</select>
		</form>
		
		<script type="text/javascript">
			
			function txtFocus() {
				console.log("获得焦点");
				event.target.style.background = "#ffff66";
			}

			function txtBlur() {
				console.log("失去焦点");
				event.target.style.background = "#ffffff";
			}


			// onfocus  获得焦点事件
			username.onfocus = txtFocus;
			// onblur	失去焦点事件
			username.onblur = txtBlur;
			
			function changeColor()
			{
				console.log(colorSel.value);
				document.body.style.background = colorSel.value;
			}
			
			window.onload = function()
			{
				// document.body.style.background = "rgb(0,0,0)";
			}
			
			// 练习:
			// 1. 添加3个输入框编号rSel gSel bSel 
			// 2. 输入 0~255 的值 
			// 3. 添加onchange事件,只要内容一改变，修改网页的背景颜色为这3个框的设定值
			// var r = rSel.value;
			// var g = gSel.value;
			// var b = bSel.value;
			// document.body.style.background = "rgb("+r+","+g+","+b+")";
		</script>
	</body>
</html>